<template>
	<view class="course-remind">
		<view class="block item" v-for="item in dataObj.list" :key="item.id">
			<view class="content" @click="onPageTap(item.id)">
				<image class="cover" :src="item.image"></image>
				<view class="title">{{item.title}}</view>
				<view class="time">开课时间：{{item.time}}</view>
			</view>
			<view class="footer">
				<span>开课前5分钟提醒我</span>
				<switch class="btn-open" color="#FE6B00" :checked="item.remind" @change="switchChange($event, item)"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: {
					list: [{
						id: 1,
						image: '',
						title: '建筑施工行业从业人员安全培训课程与防治课',
						time: '2020年4月12日 10:00',
						remind: false
					}, {
						id: 2,
						image: '',
						title: '建筑施工行业从业人员安全培训课程与防治课',
						time: '2020年4月12日 10:00',
						remind: true
					}, {
						id: 3,
						image: '',
						title: '建筑施工行业从业人员安全培训课程与防治课',
						time: '2020年4月12日 10:00',
						remind: false
					}]
				}
			}
		},
		methods: {
			// 页面操作
			onPageTap(id) {
				uni.navigateTo({
					url: '/pages/video/detail?id=' + id
				});
			},
			switchChange(e, item) {
				let value = e.detail.value;
				let that = this;
				if (!value) {
					item['remind'] = false;
					uni.showModal({
						title: '提示',
						content: '您确定关闭课程提醒吗？',
						confirmColor: '#FE6B00',
						success: function (res) {
							if (res.confirm) {
								// 用户点击确定
								that.postRemind();
							} else if (res.cancel) {
								// 用户点击取消
								item['remind'] = true;
							}
						}
					});
				} else {
					that.postRemind();
				}
			},
			// 请求提醒接口
			postRemind() {
				console.log('请求提醒接口');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.course-remind{
		padding: 18rpx 0 2rpx;
		.item{
			padding-right: 0;
			padding-bottom: 0;
			.content{
				position: relative;
				padding: 0 36rpx 32rpx 272rpx;
				border-bottom: 1rpx solid #EAEFF1;
				.cover{
					position: absolute;
					top: 0;
					left: 0;
					width: 254rpx;
					height: 158rpx;
					border-radius: 14rpx;
					background-color: #EEE;
				}
				.title{
					height: 80rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #1A1A1A;
					margin-bottom: 42rpx;
				}
				.time{
					line-height: 30rpx;
					font-size: 22rpx;
					color: #7F7F7F;
				}
			}
			.footer{
				position: relative;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 26rpx;
				color: #373737;
				.btn-open{
					position: absolute;
					z-index: 1;
					top: 12rpx;
					right: 24rpx;
					width: 104rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: right;
					transform: scale(0.8);
				}
			}
		}
	}
</style>
